{% if isFramework("javascript") %}

There are two ways to tell the Grid to use a custom component:

- Direct reference.
- By name.

### 1. Direct Reference

The easiest approach is to refer to the Component class directly.

{% /if %}

{% if isFramework("javascript") %}
```js
gridOptions = {

    columnDefs: [
        {
            field: 'country',
            cellRenderer: CountryCellRenderer,
            filter: CountryFilter
        },
    ],

    ...
}
```
{% /if %}

{% if isFramework("javascript") %}
The advantage of referencing Components directly is cleaner code, without the extra level of indirection added when referencing by name.

### 2. By Name

A Component is registered with the grid by providing it through the `components` grid property. The `components` grid property contains a map of Component Names to Component Classes. Components of all types (editors, renderers, filters etc) are all stored together and must have unique names.

{% /if %}

{% if isFramework("javascript") %}
```js
gridOptions = {

    // register the components using 'components' grid property
    components: {
        // 'countryCellRenderer' is mapped to class CountryCellRenderer
        countryCellRenderer: CountryCellRenderer,
        // 'countryFilter' is mapped to class CountryFilter
        countryFilter: CountryFilter
    },

    // then refer to the component by name
    columnDefs: [
        {
            field: 'country',
            cellRenderer: 'countryCellRenderer',
            filter: 'countryFilter'
        },
    ],

    ...
}
```
{% /if %}

{% if isFramework("javascript") %}
The advantage of referencing components by name is definitions (eg Column Definitions) can be composed of simple types (ie JSON), which is useful should you wish to persist Column Definitions.
{% /if %}
